﻿@model CustomerTrackingModel
@using SpotsHub.Gateway.Models.Customer;
@using Telerik.Web.Mvc;
@using Telerik.Web.Mvc.UI;
@using Nop.Core.Infrastructure;

@{
    if (Model.IsAuthenticated)
    {
        Layout = "~/Views/Shared/_MyHUB.cshtml";
        @section left
        {
            @Html.Partial("MyAccountNavigation", Model.NavigationModel, new ViewDataDictionary())
        }
    }
    else
    {
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    //title
    ViewBag.Title = T("Account.MyAccount") + " - " + T("Account.CustomerTracking");

    var gridPageSize = EngineContext.Current.Resolve<Nop.Core.Domain.Customers.CustomerSettings>().GridPageSize;
    if (gridPageSize <= 0)
    {
        gridPageSize = 10;
    }
}

<div class="page-tracking">
    <div class="tracking-slides-wrapper">
        @if (Model.IsAuthenticated)
        {
            <div class="slide tracking-table-form">
                <h1>@T("Account.MyAccount") - @T("Account.CustomerTracking")</h1>
                <div class="section-wrapper">
                    <div class="tracking-page-clip">
                        <div class="tracking-page-wrapper">
                            <div class="tracking-table-wrapper">
                                <div class="tracking-search">
                                    <div class="row">
                                        <div class="col-xs-12 col-ms-12 col-sm-12 col-md-5 tracking-searchbox">
                                            <label>Tracking #: </label>
                                            @Html.TextBoxFor(model => model.TrackingNumber, new { placeholder = "Please type in full tracking #", autocomplete = "off", @class = "form-control" })
                                        </div>
                                        <div class="col-xs-8 col-ms-6 col-sm-6 col-md-4 tracking-daylist">
                                            <label>Select Time Span: </label>
                                            @Html.DropDownListFor(model => model.TrackingDays, Model.TrackingDaysOptions, new { @class = "form-control" })
                                        </div>
                                        <div class="col-xs-4 col-ms-4 col-sm-3 col-md-1 tracking-daylist">
                                            <label>&nbsp;</label><br />
                                            <input type="button" class="btn btn-normal tracking-package-submit" value="Track" />
                                        </div>
                                        <div class="col-xs-12 col-ms-2 col-sm-3 col-md-2">
                                            <div class="tracking-search-loading">
                                                <img class="loading-gif" src="/content/images/loading.gif" />
                                                <img class="loading-svg" src="/content/images/loading.svg" />
                                            </div>
                                        </div>
                                            <div class="clear"></div>
                                            @*<td class="connector">for</td>
                                                 <td class="tracking-daylist">
                                              @Html.DropDownListFor(model => model.TrackingDays, Model.TrackingDaysOptions, new { @class = "form-control" })
                                                 </td>
                                                 <td>
                                            <div class="tracking-search-loading">
                                                <img class="loading-gif" src="/content/images/loading.gif" />
                                                <img class="loading-svg" src="/content/images/loading.svg" />
                                            </div>
                                            </td>*@
                                    </div>

                                    @*<div class="tracking-datepicker" style="display:none;">
                                            @(Html.Telerik().DatePicker()
                                                .Name(Html.FieldNameFor(m => m.StartDate))
                                                .Value(Model.StartDate > DateTime.MinValue ? Model.StartDate : null))
                                            @(Html.Telerik().DatePicker()
                                                .Name(Html.FieldNameFor(m => m.EndDate))
                                                .Value(Model.EndDate > DateTime.MinValue ? Model.EndDate : null))
                                        </div>*@
                                </div>
                                <div class="clear"></div>
                                <div id="trackingTable">
                                    @(Html.Telerik().Grid<CustomerTrackingModel.TrackingPackageModel>()
                                        .Name("tracking-grid")
                                        .Columns(columns =>
                                        {
                                            columns.Bound(x => x.TrackingNumber);
                                            columns.Bound(x => x.CreatedTimeStr);
                                            columns.Bound(x => x.Status);
                                            columns.Bound(x => x.DownloadShippingLabelLink);
                                            columns.Bound(x => x.ShipmentDetailLink);
                                        })
                                        .ClientRowTemplate(x => "<tr class='tracking-item' data-name='ShipmentId' data-value='<#= ShipmentId #>'>" +
                                            "<td class='tracking-row-tracking-number'><label>Tracking Number:</label> <#= TrackingNumber #></td>" +
                                            "<td class='tracking-row-created-date'><label>Created On:</label> <#= CreatedTimeStr #></td>" +
                                            "<td class='tracking-row-status'><label>Status:</label> <#= Status #></td>" +
                                            "<td class='tracking-row-shipping-label'><label>Shipping Label:</label> <#= DownloadShippingLabelLink #></td>" +
                                            "<td class='tracking-row-view-details'><#= ShipmentDetailLink #></td>" +
                                            "</tr>"
                                        )
                                        .DataBinding(dataBinding => dataBinding.Ajax().Select("TrackingPackageList", "Customer"))
                                                .Pageable(settings => settings.PageSize(gridPageSize).Position(GridPagerPosition.Bottom))
                                        .ClientEvents(events =>
                                        {
                                            events.OnDataBinding("onDataBinding");
                                            events.OnDataBound("onDataBound");
                                            events.OnComplete("onComplete");
                                        })
                                        .HtmlAttributes(new { Class = "order-table t-widget t-grid" })
                                        .NoRecordsTemplate(T("MyAccount.Tracking.NoPackageAvailable").Text)
                                    )
                                </div>
                            </div>
                            <div class="content-clear"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        var screenWidth = window.innerWidth, marginTop = null;
                        if (screenWidth <= 320) {
                            marginTop = -360;
                        }
                        else if (screenWidth <= 480 && screenWidth > 320) {
                            marginTop = -270;
                        }
                        else if (screenWidth <= 768 && screenWidth > 480) {
                            marginTop = -270;
                        }
                        else if (screenWidth <= 992 && screenWidth > 768) {
                            marginTop = -270;
                        }
                        else {
                            marginTop = -235;
                        }
                        var viewDetails = false,
                            shipmentId,
                            searchKeyupTimeout,
                            trackingAjaxCount = 0;
                        $(document).on("change", "#@(Html.FieldIdFor(model => model.TrackingDays))", function () {
                            $("#TrackingNumber").val('');
                            TrackingSearch();
                        }).on("keyup", "#@(Html.FieldIdFor(model => model.TrackingNumber))", function () {
                            //clearTimeout(searchKeyupTimeout);
                            //searchKeyupTimeout = setTimeout(function () {
                            //    TrackingSearch();
                            //}, 1500);
                            if (event.keyCode == 13) {
                                TrackingSearch();
                            }
                        }).on("click", ".tracking-package-submit", function () {
                            TrackingSearch();
                        });


                        window.onpopstate = function (e) {
                            if (viewDetails) {
                                viewDetails = false;
                                $(".tracking-page-wrapper").stop().animate({ "margin-top": 0 });
                                $(".tracking-details-wrapper").stop().animate({ "height": $(".tracking-details-loading").outerHeight() + $(".tracking-back-button").outerHeight(true), "opacity": 1 });
                                $(".tracking-details").stop().animate({ "opacity": 0 }, function () {
                                    $(".tracking-details-loading").stop().animate({ "opacity": 1 });
                                });
                            } else {
                                var state = history.state;
                                if (state != null && state.shipmentId != null) {
                                    $(".tracking-details").css("opacity", 0);
                                    $(".tracking-details-loading").stop().animate({ "opacity": 1 });
                                    $(".tracking-details-wrapper").stop().animate({ "height": $(".tracking-details-loading").outerHeight() + $(".tracking-back-button").outerHeight(true), "opacity": 1 });
                                    viewDetails = true;
                                    $.ajax({
                                        url: '@Url.Action("AjaxShipmentDetails", "Order")',
                                        type: "POST",
                                        dataType: "JSON",
                                        data: { shipmentId: state.shipmentId }
                                    }).done(function (response) {
                                        if (viewDetails) {
                                            $(".tracking-details").html(response.html).stop().animate({ "opacity": 1 });
                                            $(".tracking-details-loading").stop().animate({ "opacity": 0 });
                                            $(".tracking-details-wrapper").stop().animate({ "height": $(".tracking-details").outerHeight() + $(".tracking-back-button").outerHeight(true), "opacity": 1 });
                                        }
                                    });
                                    $(".tracking-page-wrapper").stop().animate({ "margin-top": marginTop });
                                }
                            }
                        };

                        function TrackingSearch() {
                            var grid = $("#tracking-grid").data("tGrid");
                            grid.currentPage = 1;
                            grid.ajaxRequest();
                            trackingAjaxCount++;
                        }

                        function onDataBinding(e) {
                            var customerTrackingModel = {
                                TrackingNumber: $("#@(Html.FieldIdFor(model => model.TrackingNumber))").val(),
                                TrackingDays: $("#@(Html.FieldIdFor(model => model.TrackingDays))").val()
                            };
                            e.data = customerTrackingModel;
                            $(".tracking-search-loading").stop().fadeIn(200);
                        }

                        function onDataBound() {
                            $("#trackingTable tbody tr").not(".tracking-item, .t-no-data").remove();
                        }

                        function onComplete() {
                            trackingAjaxCount--;
                            if (trackingAjaxCount <= 0) {
                                trackingAjaxCount = 0;
                                $(".tracking-search-loading").stop().fadeOut(200);
                            }
                            $(".tracking-item").remove();
                        }

                    </script>
                </div>
            </div>
        }
        <div class="slide tracking-shipment-info">
            @if (!Model.IsAuthenticated)
            {
                <h1 class="page-title"><span class="title-image"></span> @T("Account.CustomerTracking")</h1>
                <p>Please type in tracking number to start searching. (e.g. 00001-000000000001)</p>
                <div class="tracking-submit-unauthenticated">
                        <div class="row">
                            <div class="tracking-searchbox col-xs-12 col-sm-6">
                                <label>Enter the exact tracking # here:</label><br />
                                @Html.TextBoxFor(model => model.TrackingNumber, new { placeholder = "Please type in full tracking #", autocomplete = "off", @class = "form-control" })
                            </div>
                            <div class="tracking-search-button tracking-submit col-xs-12 col-sm-2 col-md-1">
                                <label>&nbsp;</label><br />
                                <input type="button" class="btn btn-normal tracking-package-submit" value="Track" />
                            </div>
                            @*<td class="connector">for</td>
                            <td class="tracking-daylist">
                                @Html.DropDownListFor(model => model.TrackingDays, Model.TrackingDaysOptions, new { @class = "form-control" })
                            </td>*@
                            @*<td>
                                <div class="tracking-submit" style="margin-left: 20px;">
                                    <input type="button" value="submit" class="btn btn-normal" />
                                </div>
                            </td>*@
                            <div class="col-sm-4 col-md-5">
                                <div class="tracking-search-loading">
                                    <img class="loading-gif" src="/content/images/loading.gif" />
                                    <img class="loading-svg" src="/content/images/loading.svg" />
                                </div>
                            </div>
                        </div>
                </div>
            }
            else
            {
                <h1>@T("Account.MyAccount") - Shipment Details <input type="button" class="btn btn-normal shipment-info-back-button" value="@T("Common.Back")" /></h1>
            }
            <div class="tracking-shipment-info-content"></div>
        </div>
        <div class="slide tracking-shipment-action">
            @if (!Model.IsAuthenticated)
            {
                <h1 class="page-title"><span></span></h1>
            }
            else
            {
                <h1 class="page-title">@T("Account.MyAccount") - <span></span></h1>
            }
            <div class="slide tracking-shipment-action-content"></div>
        </div>
        <div class="tracking-info-loading">
            <img class="loading-gif" src="/content/images/loading.gif" />
            <img class="loading-svg" src="/content/images/loading.svg" />
        </div>
    </div>
</div>

<script>
    $(".shipment-tracking-details-button").live("click", function () {
        if (parseInt($(this).attr("data-id")) > 0) {
            $(".tracking-info-loading").fadeIn(200);
            $(".tracking-shipment-info-content").empty();
            $(".tracking-shipment-info").css("position", "absolute").stop().animate({ left: 0 });
            $(".tracking-table-form").css("position", "absolute").stop().animate({ left: "-100%" }, function () {
                $(".tracking-shipment-info").css("position", "relative");
            });
            if ($("body").scrollTop() > $(".my-hub-content").offset().top) {
                $("html, body").stop().animate({
                    scrollTop: $(".my-hub-content").offset().top
                }, 200);
            }
            $.ajax({
                url: '/express/shipment/details',
                data: { ShipmentId: parseInt($(this).attr("data-id")) },
                type: "POST",
                dataType: "JSON"
            }).done(function (data) {
                if (data.html) {
                    $(".tracking-shipment-info-content").html(data.html);
                }
            }).always(function () {
                $(".tracking-info-loading").fadeOut(200);
            });
        }

    });
    $(".shipment-info-back-button").live("click", function () {
        $(".tracking-info-loading").fadeOut(200);
        $(".tracking-shipment-info").css("position", "absolute").stop().animate({ left: "100%" });
        TrackingSearch();
        if ($("body").scrollTop() > $(".my-hub-content").offset().top) {
            $("html, body").stop().animate({
                scrollTop: $(".my-hub-content").offset().top
            }, 200);
        }
        $(".tracking-table-form").css("position", "absolute").stop().animate({ left: 0 }, function () {
            $(".tracking-table-form").css("position", "relative");
        });
    });
    $(".shipment-action-back-button, .tracking-shipment-action input[data-action=cancel]").live("click", function () {
        $(".tracking-info-loading").fadeOut(200);
        $(".tracking-shipment-action").css("position", "absolute").stop().animate({ left: "100%" });
        $(".tracking-shipment-info").css("position", "absolute").stop().animate({ left: 0 }, function () {
            $(".tracking-shipment-info").css("position", "relative");
            $(".tracking-shipment-action-content").empty();
        });
        if ($("body").scrollTop() > $(".my-hub-content").offset().top) {
            $("html, body").stop().animate({
                scrollTop: $(".my-hub-content").offset().top
            }, 200);
        }
        var shipmentItem = $(".tracking-shipment-info input#shipment-id");
        if (shipmentItem.length) {
            $(".tracking-info-loading").stop().fadeIn(200);
            $(".tracking-shipment-info-content").empty();
            $.ajax({
                url: '@Url.Action("Details", "Shipment", new { area = "Logistics" })',
                data: { ShipmentId: shipmentItem.attr("data-value") },
                type: "POST",
                dataType: "JSON"
            }).done(function (data) {
                if (data.html) {
                    $(".tracking-shipment-info-content").html(data.html);
                    $(".tracking-shipment-info-content h1").remove();
                }
                if (data.messages) {
                    $(".tracking-shipment-info-content").prepend(data.messages);
                }
            }).always(function () {
                $(".tracking-info-loading").fadeOut(200);
            });
        }
    });
    $(".tracking-submit-unauthenticated .tracking-searchbox input").live("keypress", function (e) {
        var keycode = (e.keyCode ? e.keyCode : e.which);
        if (keycode == '13') {
            directTrackPackage();
            $(this).blur();
            e.stopPropagation();
            e.preventDefault();
        }
    });
    $(".tracking-submit-unauthenticated .tracking-submit input").live("click", function () {
        directTrackPackage();
    });
    $(".package-tracking-action input[type=button]").live("click", function () {
        if ($(this).attr("data-url") != "" && $(this).attr("data-url") != null) {
            var d = [];
            if ($(this).attr("data-name") != "" && $(this).attr("data-name") != null) {
                d.push({ name: $(this).attr("data-name"), value: $(this).attr("data-value") });
            }
            if ($(this).attr("data-name2") != "" && $(this).attr("data-name2") != null) {
                d.push({ name: $(this).attr("data-name2"), value: $(this).attr("data-value2") });
            }
            $(".tracking-info-loading").fadeIn(200);
            $(".tracking-shipment-action-content").empty();
            $(".tracking-shipment-action h1 span").text($(this).val());
            $(".tracking-shipment-action").css("position", "absolute").stop().animate({ left: 0 });
            $(".tracking-shipment-info").css("position", "absolute").stop().animate({ left: "-100%" }, function () {
                $(".tracking-shipment-action").css("position", "relative");
            });
            if ($("body").scrollTop() > $(".my-hub-content").offset().top) {
                $("html, body").stop().animate({
                    scrollTop: $(".my-hub-content").offset().top
                }, 200);
            }
            $.ajax({
                url: $(this).attr("data-url"),
                type: "POST",
                dataType: "JSON",
                data: d
            }).done(function (data) {
                if (data.html) {
                    $(".tracking-shipment-action-content").html(data.html);
                }
            }).always(function () {
                $(".tracking-info-loading").fadeOut(200);
            });
        }
    });
    $(".tracking-shipment-action-content input.address-select").live("click", function () {
        if ($("body").scrollTop() > $(".my-hub-content").offset().top) {
            $("html, body").stop().animate({
                scrollTop: $(".my-hub-content").offset().top
            }, 200);
        }
        $(".address-form.slide").css("position", "relative").stop().animate({ left: "-100%", top: 0 }, 200);
        $(".address-select-list.slide").css("position", "relative").stop().animate({ left: 0, top: 0 }, 200, function () {
            $(".address-form.slide").css("position", "absolute");
        });
    });
    $(".address-select-list.slide input.address-select-cancel").live("click", function () {
        if ($("body").scrollTop() > $(".my-hub-content").offset().top) {
            $("html, body").stop().animate({
                scrollTop: $(".my-hub-content").offset().top
            }, 200);
        }
        $(".address-form.slide").css("position", "relative").stop().animate({ left: 0, top: 0 }, 200);
        $(".address-select-list.slide").css("position", "relative").stop().animate({ left: "100%", top: 0 }, 200, function () {
            $(".address-select-list.slide").css("position", "absolute");
        });
    });
    $(".tracking-shipment-action-content [data-action=submit]").live("click", function () {
        if ($(this).closest("form").length) {
            $(".tracking-info-loading").fadeIn(200);
            $(".tracking-shipment-action-content").fadeOut(200);
            var d = $(this).closest("form").serializeArray();
            if ($(this).attr("data-name") != null && $(this).attr("data-name") != "") {
                d.push({ name: $(this).attr("data-name"), value: $(this).attr("data-value") });
            }
            if ($(this).attr("data-name2") != null && $(this).attr("data-name2") != "") {
                d.push({ name: $(this).attr("data-name2"), value: $(this).attr("data-value2") });
            }
            if ($("body").scrollTop() > $(".my-hub-content").offset().top) {
                $("html, body").stop().animate({
                    scrollTop: $(".my-hub-content").offset().top
                }, 200);
            }
            $.ajax({
                url: $(this).closest("form").attr("action"),
                type: "POST",
                dataType: "JSON",
                data: d
            }).done(function (data) {
                if (data.html != null && data.html != "") {
                    $(".tracking-shipment-action-content").html(data.html);
                }
                if (data.messages) {
                    $(".tracking-shipment-action-content").prepend(data.messages);
                }
            }).always(function () {
                $(".tracking-info-loading").fadeOut(200);
                $(".tracking-shipment-action-content").fadeIn(200);
            });
        }
    });
    function directTrackPackage() {
        $(".tracking-search-loading").fadeIn(200);
        $(".tracking-shipment-info-content").empty();
        $.ajax({
            url: '@Url.Action("Details", "Shipment", new { area = "Logistics" })',
            data: { TrackingNumber: $(".tracking-searchbox input").val() },
            type: "POST",
            dataType: "JSON"
        }).done(function (data) {
            if (data.html) {
                $(".tracking-shipment-info-content").html(data.html);
                $(".tracking-shipment-info-content h1").remove();
            }
            if (data.messages) {
                $(".tracking-shipment-info-content").prepend(data.messages);
            }
        }).always(function () {
            $(".tracking-search-loading").fadeOut(200);
        });
    }
</script>